$(function(){
	var floorTop = [];
	var index = 0;
//	得到每一个楼层距离页面顶部的距离，把它放进一个数组里
//	jQuery遍历数组的方式是each
	$('.floor').each(function(i,k){
		//console.log(i,k);//通过打印，可以发现i是索引值，k是当前索引对应的元素
		//console.log(k.offsetTop,k);//offsetTop得到每一层楼距离页面顶部的距离。如果滚动条滚过了这个距离，说明，当前楼层应该显示。因此我将它们距离顶部的距离都存入数组
		floorTop.push(k.offsetTop);
	})
	
//	滚动条滚动事件.
	$(document).on('scroll',roll);
	function roll(){
//		通过滚动条滚过的距离,计算出应该显示的楼层的索引值
		index = getIndex($(document).scrollTop());
		console.log(index);
//		焦点对齐
		changeFloor(index);
	}
//	焦点对齐的方法
	function changeFloor(index){
		$('.sideBar li').eq(index).addClass('active').siblings().removeClass('active');
	}
	
//	通过滚动条滚过的距离,计算索引
	function getIndex(st){
		for(var i=0;i<floorTop.length;i++){
//			如果滚动条滚过的距离介于当前楼层和下一个楼层之间,那么意味着当前楼层显示
			if(st>floorTop[i]-200&&st<floorTop[i+1]-200){
				return i;
			}
//			当滚到最后一个楼层的时候,因为没有下一个楼层,所以通过一下条件判断,是否是最后一个楼层
			if(st>floorTop[floorTop.length-1]-200){
				return floorTop.length-1;
			}
		}
	}
	
//	点击楼层侧边栏,跳转到对应的楼层
	$('.sideBar li').click(function(){
//		点击边栏楼层的时候,首先取消掉滚动事件,防止滚动时触发改变sideBar楼层
		$(document).off('scroll');
//		获得点击楼层索引
		var index = $(this).index();
//		根据索引做焦点对齐
		changeFloor(index);
//		根据索引得到滚动条应该滚到的位置
//		
		
		if(navigator.userAgent.indexOf('Firefox')>=0){
			$(document.documentElement).animate({scrollTop:floorTop[index]},500,function(){
	//			滚到位置之后,在回调函数中,将滚动事件重新绑定.以便滚动页面的时候,可以改变边条的楼层指示
				$(document).on('scroll',roll);
			});
		}else{
			$(document.body).animate({scrollTop:floorTop[index]},500,function(){
	////			滚到位置之后,在回调函数中,将滚动事件重新绑定.以便滚动页面的时候,可以改变边条的楼层指示
				$(document).on('scroll',roll);
			});
		}

	})
	console.log();
})











